<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-10 15:01:12
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-12 09:42:25
 * @FilePath: \variant-form\src\components\form-designer\form-widget\field-widget\userModel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    title="用户选择"
    :visible.sync="open"
    width="70%"
    :before-close="close"
    custom-class="userModel"
    :append-to-body="true"
  >
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="6" :xs="24" style="border-right: 1px solid #f0f0f0">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="18" :xs="24">
        <el-input
          v-model="nickName"
          @keydown.enter.native="getList"
          placeholder="请输入姓名，输入后按回车查询"
          style="width:300px;margin-bottom:8px"
          clearable
        />
        <el-table
          v-loading="loading"
          :data="userList"
          border
          size="mini"
          ref="tableRef"
          :row-key="'userId'"
          @select="handleSelectionChange"
          @select-all="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
            v-if="multiple"
          >
          </el-table-column>
          <el-table-column label=" " align="center" width="60" v-else>
            <template slot-scope="scope">
              <el-radio
                v-model="radio"
                :label="scope.row.userId"
                @change.native="handleSelectionChange(scope.row)"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            label="用户名称"
            align="center"
            key="userName"
            prop="userName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="姓名"
            align="center"
            key="nickName"
            prop="nickName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="部门"
            align="center"
            key="deptName"
            prop="dept.deptName"
            :show-overflow-tooltip="true"
          />
        </el-table>

        <div style="display: flex; justify-content: flex-end">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <span
      slot="footer"
      class="dialog-footer"
      style="display: flex; justify-content: flex-end"
    >
      <div>
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          @click="handleUserSubmit(selectionArr, typeKey)"
          >确 定</el-button
        >
      </div>
    </span>
  </el-dialog>
</template>

<script>
import { deptTreeSelect, listUser } from "@/api/system/user.js";
import pagination from "@/components/Pagination/index";
export default {
  props: {
    handleUserSubmit: {
      type: Function,
      default: () => {},
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    open: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    typeKey: {
      type: String,
      default: "",
    },
  },
  components: {
    pagination,
  },
  data() {
    return {
      selectionArr: undefined,
      loading: false,
      userList: [],
      total: 0,
      nickName:'',
      deptName: undefined,
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: "0",
        deptId: undefined,
      },
      radio: undefined,
    };
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    getViewData(value) {
      if (!!value?.length) {
        this.selectionArr = value;
        if (!this.multiple) {
          this.radio = value?.[0].userId;
        }
      }
    },
    handleSelectionChange(arr) {
      if (!this.multiple) {
        this.selectionArr = [arr];
        return;
      }
      this.selectionArr = arr;
    },
    getList() {
      this.loading = true;
      listUser({ ...this.queryParams, userType: "front_user" ,nickName:this.nickName}).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
          console.log(this.selectionArr);
          if (this.multiple && this.selectionArr?.length) {
            // const ids = [];
            this.selectionArr?.forEach((val) => {
              this.$refs.tableRef.toggleRowSelection(val, true);
              // ids.push(val.userId);
            });
            // this.$nextTick(() => {
            //   this.userList?.forEach((item) => {
            //     if (ids?.includes(String(item.userId))) {
            //       this.$refs.tableRef.toggleRowSelection(item, true);
            //     }
            //   });
            // });
          }
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
  },
  mounted() {
    this.getDeptTree();
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  border: none !important;
}

::v-deep .el-radio__label {
  display: none;
}
::v-deep .el-col {
  height: 550px;
  overflow-y: scroll;
}
</style>